<template>
  <div>
    <!--    面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    卡片视图区域-->
    <el-card class="box-card">
      <div>
        <el-row :gutter="20">
          <el-col :span="18" :offset="3">
            <div id="echarts" :style="{height: '300px'}"></div>
          </el-col>
          <el-col :span="18" :offset="3">
            <div id="main" style="height:400px;"></div>
          </el-col>
          <el-col :span="18" :offset="3">
            <div id="main2" style="height:400px;"></div>
          </el-col>
          <el-col :span="18" :offset="3">
            <div id="test1" style="height:400px;"></div>
          </el-col>
        </el-row>
<!--        test-->
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  mounted () {
    this.getEchartData()
    this.getShopMData()
    this.getZXData()
    this.getTest1Data()
  },
  methods: {
    // tu
    getEchartData: function () {
      var dom = document.getElementById('echarts')
      var myChart = this.echarts.init(dom)
      // 绘制图表
      myChart.setOption({
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          data: [{
            value: 235,
            name: '视频广告'
          },
          {
            value: 274,
            name: '联盟广告'
          },
          {
            value: 310,
            name: '邮件营销'
          },
          {
            value: 335,
            name: '直接访问'
          },
          {
            value: 400,
            name: '搜索引擎'
          }
          ]
        }]
      })
    },
    getShopMData () {
      var myChart = this.echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '商品销量总排名'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['西瓜', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    getZXData () {
      var myChart = this.echarts.init(document.getElementById('main2'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '堆叠区域图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            areaStyle: {},
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    // test1
    getTest1Data () {
      var myChart = this.echarts.init(document.getElementById('test1'))
      var optiontest1 = {
        tooltip: {
          trigger: 'none'
        },
        legend: {
          data: ['预购队列', '最新成交价']
          // width: '10px'
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: false
            },
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            },
            boundaryGap: true,
            // 坐标轴名称与轴线之间的距离。好像没有用
            nameGap: 60,
            data: [{
              value: '周一',
              textStyle: {
                color: 'red'
              }
            }, '周二', '周三', '周四', '周五', '周六', '周日', '周一', '周一', '周一'],
            // 刻度标签与轴线之间的距离。
            axisLabel: {
              margin: 28
            }
          },
          {
            type: 'category',
            boundaryGap: true,
            // 坐标轴轴线相关设置。
            axisLine: {
              show: false,
              // 设置坐标轴颜色
              lineStyle: {
                color: '#f8e8e8'
              }
            },
            // 坐标轴名称与轴线之间的距离。没用到
            nameGap: 60,
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2],
            // 坐标轴轴线相关设置。
            axisLine: {
              show: false
            },
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            }
          },
          {
            type: 'value',
            scale: true,
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2],
            // 坐标轴轴线相关设置。
            axisLine: {
              show: false
            },
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '预购队列',
            // color: '#87a5f3',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#7ae29c' // 0% 处的颜色
              }, {
                offset: 1, color: '#87a5f3' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            },
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            barWidth: '40%',
            itemStyle: {
              // （顺时针左上，右上，右下，左下）
              barBorderRadius: [50, 50, 0, 0]
            },
            data: (function () {
              var res = [290, 900, 500, 300, 200, 210, 100, 800, 700, 1000]
              // var len = 10
              return res
            })(),
            showSymbol: true
          },
          {
            name: '最新成交价',
            type: 'line',
            color: '#7ae29c',
            // symbol: 'roundCircle',
            symbolSize: 10,
            data: (function () {
              var res = [12, 13, 12, 11, 16, 18, 23, 11, 14, 13]
              // var len = 0
              return res
            })()
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optiontest1)
    }
  }
}
</script>
